<template>
  <div>
    <div class="head">
      <form action="/">
        <van-search
          shape="round"
          v-model="value"
          placeholder="请输入搜索关键词"
          @search="onSearch"
        />
      </form>
    </div>
    <div class="content-box">
      <div class="broadside" :style="{ 'min-height': inHeight }">
        <van-sidebar v-model="activeKey" @change="onChange">
          <van-sidebar-item :title="'推荐'" />
          <van-sidebar-item
            :title="v.typeDesc"
            v-for="(v, i) in dataArr"
            :key="i"
          />
        </van-sidebar>
      </div>
      <div class="right-shop">
        <div class="shop-box">
          <div class="item" v-for="(v, i) in childData" :key="i">
            <div class="img-box">
              <img :src="v.smallImg" alt="" @click="next(v)" />
            </div>
            <p class="pro-name">{{ v.name }}</p>
            <p class="pro-enname">{{ v.enname }}</p>
            <p class="pro-price">￥{{ v.price }}</p>
            <!-- <span class="add-shop">+</span> -->
            <span class="add-shop" @click="getRule(v.pid)">+</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "Menu",
  data() {
    return {
      appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
      tokenString: sessionStorage.getItem("userToken"),
      value: "",
      activeKey: 0,
      dataArr: null,
      childData: null,
      recommendShop: null,
      inHeight: innerHeight + "px",
    };
  },
  methods: {
    onSearch(val) {
      this.$router.push({ name: "Sousuo", query: { name: val } });
    },
    onChange(index) {
      this.getChildData();
    },
    next(v) {
      this.$router.push({ name: "ShopMes", query: { pid: v.pid } });
    },
    getDataArr() {
      this.axios({
        method: "get",
        url: "http://www.kangliuyong.com:10002/type",
        params: {
          appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
        },
      })
        .then((result) => {
          this.dataArr = result.data.result;
          
          this.getChildData();
        })
        .catch((err) => {
          
        });
    },
    getChildData() {
      if (this.activeKey === 0) {
        this.childData = this.recommendShop;
        return;
      }
      let value = this.dataArr[this.activeKey - 1].type;
      this.axios({
        method: "get",
        url: "http://www.kangliuyong.com:10002/typeProducts",
        params: {
          appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
          key: "type",
          value,
        },
      })
        .then((res) => {
          this.childData = res.data.result;
        })
        .catch((err) => {
          
        });
    },
    getRecommend() {
      this.axios({
        method: "get",
        url: "http://www.kangliuyong.com:10002/typeProducts",
        params: {
          appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
          key: "isHot",
          value: 1,
        },
      })
        .then((res) => {
          this.recommendShop = res.data.result;
          this.getChildData();
        })
        .catch((err) => {
          
        });
    },
    getRule(pid) {
      let arr = ["cream", "milk", "sugar", "tem"];
      let obj = {};
      let rules = [];
      let res = "";
      let appkey = this.appkey;
      this.axios({
        method: "get",
        url: "http://www.kangliuyong.com:10002/productDetail",
        params: {
          appkey,
          pid,
        },
      })
        .then((result) => {
          // 
          obj = result.data.result[0];
          arr.forEach((v) => {
            if (obj[v]) {
              let rule = obj[v].split("/")[0];
              rules.push(rule);
            }
          });
          rules.forEach((v) => {
            res += v + "/";
          });
          res = res.slice(0, -1);
          this.addShop(pid, res);
        })
        .catch((err) => {
          
        });
    },
    addShop(pid, rule) {
      
      let tokenString = this.tokenString;
      if (!tokenString) {
        Toast("请先登录");
      } else {
        let appkey = this.appkey;
        let count = 1;
        let data = `appkey=${appkey}&pid=${pid}&tokenString=${tokenString}&count=${count}&rule=${rule}`;
        this.axios({
          method: "post",
          url: "http://www.kangliuyong.com:10002/addShopcart",
          data,
        })
          .then((res) => {
            
            Toast.success("已添加购物车");
          })
          .catch((err) => {
            
          });
      }
    },
  },
  created() {
    this.getDataArr();
    this.getRecommend();
  },
};
</script>

<style lang="less" scoped>
.head {
  width: 100%;
  //   height: 40px;
  box-sizing: border-box;
  border-bottom: 1px solid #ddd;
  text-align: center;
  padding: 0 20px;
  padding-top: 10px;
}
/deep/ .van-search {
  padding: 0;
  background-color: transparent;
}
.content-box {
  width: 100%;
  padding-top: 10px;
  display: flex;
  .broadside {
    background-color: #fff;
  }
  .right-shop {
    width: 90%;
    .shop-box {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 10px;
      box-sizing: border-box;
      margin-bottom: 50px;
      .item {
        width: calc(~"100% / 2 - 10px");
        text-align: center;
        padding: 10px 2px;
        font-size: 16px;
        margin-bottom: 10px;
        border-radius: 10px;
        background-color: #fff;
        position: relative;
        .pro-enname {
          font-size: 12px;
        }
        p {
          margin: 2px 0;
          text-align: left;
          padding-left: 10%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .img-box {
          width: 80%;
          margin: 0 auto;
          img {
            width: 100%;
          }
        }
        .pro-price {
          color: rgb(12, 52, 186);
          font-weight: bold;
        }
        .add-shop {
          width: 20px;
          height: 20px;
          position: absolute;
          bottom: 10px;
          right: 10px;
          display: block;
          border-radius: 50%;
          background-color: #e4393c;
          color: #fff;
          font-size: 20px;
          line-height: 20px;
          text-align: center;
          cursor: pointer;
        }
      }
    }
  }
}
/deep/.van-sidebar-item--select::before{
  background-color: rgb(12, 52, 186);
}
</style>